<template>
  <BasicLayout>
    <Carousel></Carousel>
    <div class="home-noticebar">
      <el-row type="flex">
        <el-col :span="1" class="noticebar-col">
          <div class="noticebar-icon">
            <svg-icon icon-class="scp_home_tip" className='icon'></svg-icon>
          </div>
        </el-col>
        <el-col :span="23"><NoticeBar :options="noticeList"></NoticeBar></el-col>
      </el-row>
    </div>
    <div class="home-total">
      <div class="home-total-item" v-for="(item, index) of breads" :key="index">
        <div class="wrapper-item" @click="handleBreads(item)">
          <p class="title"><svg-icon :icon-class="item.icon" className='svg-icon'></svg-icon>&nbsp;&nbsp;{{item.label}}</p>
          <!-- <p class="value digital-number" ref="countup">{{item.value}}</p> -->
        </div>
      </div>
    </div>
    <div class="home">
      <el-row class="row-empty-30"></el-row>
      <el-row :gutter="20" type="flex" justify="space-between">
        <el-col :span="16">
          <!-- 应用流程（10条） -->
          <!-- <div class="swiper-tabs-card swiper-tabs-card-border">
            <el-row>
              <el-col :span="8">
                <div class="swiper-tabs-card-title">流程-Technological Process</div>
              </el-col>
              <el-col :span="16">
                <TagsSwiper height="30px">
                  <div v-for="(item, index) in processTypes" :key="index" :class="['tags-swiper-content', item.active ? 'is-active' : '']" @click="changeProcessTags(item)">{{item.dictText}}</div>
                </TagsSwiper>
              </el-col>
            </el-row>
            <el-divider></el-divider>
            <div class="swiper-tabs-card-grid" :style="{height: '187px'}">
              <Gird :girdData="processGridsData" :gutter="'0px'" :gutterBottom="'0px'" :columnNum="5">
                <template #content="acceptProps">
                  <GridItem
                    shadow="never"
                    :icon="`${acceptProps.item.imageCode ?acceptProps.item.imageCode : 'scp_home_function' }`"
                    :des="acceptProps.item[`processName`]"
                    @triggerGridItem="triggerGridItemProcess(acceptProps.item)"
                  >
                  </GridItem>
                </template>
              </Gird>
            </div>
          </div> -->
          <!-- 应用流程（分页） -->
          <div class="swiper-tabs-card swiper-tabs-card-border scp-tabs-card-identify">
            <el-row>
              <el-col :span="8">
                <div class="swiper-tabs-card-title">流程-Technological Process</div>
              </el-col>
              <el-col :span="16">
                <TagsSwiper height="30px">
                  <div style="vertical-align:text-top" v-for="(item, index) in processTypes" :key="index" :class="['tags-swiper-content', item.active ? 'is-active' : '']" @click="changeProcessTags(item)">{{item.dictText}}</div>
                </TagsSwiper>
              </el-col>
            </el-row>
            <el-divider></el-divider>
            <div class="swiper-tabs-card-grid swiper-tabs-carousel-process" :style="{height: '187px'}">
              <el-carousel arrow="always" :autoplay="false" indicator-position="none">
                <el-carousel-item v-for="(cols, rowIndex) in processGridsPage" :key="rowIndex">
                  <Gird :girdData="cols.cols" :gutter="'0px'" :gutterBottom="'0px'" :columnNum="5">
                    <template #content="acceptProps">
                      <GridItem
                        shadow="never"
                        :icon="`${acceptProps.item.imageCode ?acceptProps.item.imageCode : 'scp_home_function' }`"
                        :des="acceptProps.item[`processName`]"
                        @triggerGridItem="triggerGridItemProcess(acceptProps.item)"
                      >
                      </GridItem>
                    </template>
                  </Gird>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <el-image
            class="home-url"
            :src="homeMainUrl"
            fit="fit">
          </el-image>
        </el-col>
      </el-row>
      <el-row class="row-empty-30"></el-row>
      <el-row :gutter="20" type="flex" justify="space-between">
        <el-col :span="8">
          <div class="swiper-tabs-card scp-tabs-card-identify">
            <el-row>
              <el-col :span="8">
                <div class="swiper-tabs-card-title">系统-System</div>
              </el-col>
              <el-col :span="16">
                <TagsSwiper height="30px">
                  <div v-for="(item, index) in systemTypes" :key="index" :class="['tags-swiper-content', item.active ? 'is-active' : '']" @click="changeSystemTags(item)">{{item.dictText}}</div>
                </TagsSwiper>
              </el-col>
            </el-row>
            <el-divider></el-divider>
            <div class="swiper-tabs-card-grid" :style="{height: '282px'}">
              <el-carousel arrow="always" :autoplay="false" indicator-position="none">
                <el-carousel-item v-for="(cols, rowIndex) in functionGirdPage" :key="rowIndex">
                  <Gird :girdData="cols.cols" :gutter="'0px'" :gutterBottom="'0px'" :columnNum="3">
                    <template #content="acceptProps">
                      <GridItem
                        shadow="never"
                        :icon="acceptProps.item.imageCode"
                        :des="acceptProps.item[`systemName`]"
                        @triggerGridItem="triggerGridItemSystem(acceptProps.item)"
                      >
                      </GridItem>
                    </template>
                  </Gird>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="swiper-tabs-card">
            <el-row>
              <el-col :span="8">
                <!-- <div class="swiper-tabs-card-title">数值-Numerical value</div> -->
                <div class="swiper-tabs-card-title">里程碑-Milestone</div>
                <div class="swiper-tabs-card-title"></div>
              </el-col>
              <el-col :span="16">
                <TagsSwiper height="30px">
                  <div v-for="(item, index) in valueFcuntions" :key="index" :class="['tags-swiper-content', item.active ? 'is-active' : '']" @click="changeValueTags(item)">{{item.label}}</div>
                </TagsSwiper>
              </el-col>
            </el-row>
            <el-divider></el-divider>
            <div class="swiper-tabs-card-table" :style="{'height': '282px','overflow-y':'scroll'}" v-if="currValueFcuntion === 1">
              <el-table
                border
                tooltip-effect="dark"
                :data="tableDataYY"
                style="width: 100% ;"
                header-row-class-name="tabs-card-table-header"
                :header-cell-style="{background: '#53ABF3', color: '#fff', borderRight: '0px solid #ebeef5'}"
                :cell-class-name="handleCellClass"
              >
                <el-table-column
                  v-for="(col,index) in tableColumnsOther"
                  :key="index"
                  align="center"
                  :show-overflow-tooltip="true"
                  :prop="col.columncode"
                  :label="col.columnname"
                  :width="60"
                ></el-table-column>
              </el-table>
            </div>
            <div class="swiper-tabs-card-grid" :style="{height: '282px'}" v-if="currValueFcuntion === 2">
              <Gird :girdData="tabsGridsFunctions" :gutter="'0px'" :gutterBottom="'0px'" :columnNum="4">
                <template #content="acceptProps">
                  <GridItem
                    shadow="never"
                    :icon="acceptProps.item[`icon`]"
                    :des="acceptProps.item[`des`]"
                    @triggerGridItem="triggerGridItemValue(acceptProps.item[`key`])"
                  >
                  </GridItem>
                </template>
              </Gird>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-empty-30"></el-row>
      <el-row :gutter="20" type="flex" justify="space-between">
        <el-col :span="6">
          <div class="last-row app-noe">
            <div class="qcode-des">
              APP应用二维码
            </div>
            <div class="apkqcode-url" @click="triggerGridQrcode(qrcodeApp[0])"></div>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="last-row last-process">
            <div class="process-title">
              最近访问流程
            </div>
            <div class="list">
              <ListView :options="processList" @handleListItem="handleProcessListItem"></ListView>
            </div>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="last-row app-more">
            <div class="process-title">
              移动应用二维码
            </div>
            <div class="list">
              <Gird :girdData="qrcodeList" :gutter="'8px'" :gutterBottom="'8px'" :columnNum="3" :border="false">
                <template #content="acceptProps">
                  <div>
                    <el-image
                      style="width: 75px; height: 70px"
                      :src="acceptProps.item.dictKey"
                      @click="triggerGridQrcode(acceptProps.item.dictKey)"
                      fit="fit">
                    </el-image>
                    <div>{{acceptProps.item.dictText}}</div>
                  </div>
                </template>
              </Gird>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="row-empty-40"></el-row>
    </div>
    <Footer></Footer>
    <FunctionConfig
      ref="FunctionConfig"
      :function-list="functionList"
      :function-uses="functionGirdData"
      :function-loading="functionLoading"
      :functionDislogVisible="functionDislogVisible"
      @closeFunctionConfig="closeFunctionConfig"
      @submitForm="submitFormFunction"
    >
    </FunctionConfig>
    <ModalBox :modal-show="modalShow" :width="440" :height="400" @closeModal="closeModal" background-color="#fff">
      <el-image
        style="width: 100%; height: 100%"
        :src="modalUrl"
        fit="fit">
      </el-image>
    </ModalBox>
  </BasicLayout>
</template>
<style lang="scss">
  .home-noticebar {
    padding: 0px 40px;
    background-color: $--home_panel_bg_color;
    border-bottom: 1px solid $--color_white;
  .noticebar-col {
    width: 3.16667%;
  }
  .noticebar-icon {
    height: 35px;
    display:flex;
    flex-direction:row;
    justify-content:start;
    align-items:center;
  .icon {
    width: 27px;
    height: 25px;
    color: $--color_warning;
  // background: url(.../assets/svg/scp_notice.svg);
  }
  }
  }
  .home-total {
    width: 100%;
    min-width: 800px;
    height: 48px;
    background-color: $--home_panel_bg_color;
  // border: 1px solid #ddd;
  // border-radius: 4px;
  // margin: 0 0 15px 0;
  .home-total-item {
    color: $--color_text;
    box-sizing: border-box;
    display: inline-block;
    width: 25%;
    height: 100%;
    padding: 15px 0;
    vertical-align: top;
    cursor: pointer;
  .wrapper-item {
    height: 100%;
    padding: 0 20px;
    border-right: 1px solid $--border_color;
    text-align: center;
  .title {
    line-height: 23px;
    margin: 0px 0;
    font-size: 16px;
  }
  }
  &:last-child {
  .wrapper-item {
    border: none;
  }
  }
  }
  }
  .home {
    background-color: $--color_white;
    padding: 0px 60px 0px 60px;
  .el-scrollbar-card{
    height: 100%;
    width: 100%;
  }
  .el-scrollbar-card .el-scrollbar__wrap {
    overflow-x: auto;
  }
  .home-url {
    height: 302px;
    width: 100%;
  }
  // 应用二维码
     .last-row {
       height: 270px;
       background-color: $--home_tabs_bg_color;
       display: -webkit-box;
       display: -webkit-flex;
       display: flex;
       -webkit-flex-wrap: wrap;
       flex-direction: column;
       flex-wrap: wrap;
     }
  .app-noe {
    justify-content: center;
    align-items: center;
  .qcode-url {
    margin-top: 20px;
    width: 100px;
    height: 100px;
    background: url(../assets/img/qrcode.png) no-repeat;
    background-size: cover;
  }
  .apkqcode-url {
    margin-top: 20px;
    width: 100px;
    height: 100px;
    background: url(../assets/img/home_AppQrcode.png) no-repeat;
    background-size: cover;
  }
  }
  .last-process {
    padding: 0px 10px;
    justify-content: center;
    align-items: flex-start;
  .process-title{
    line-height: 40px;
    margin-left: 20px;
    font-size: 18px;
  }
  .list {
    width: 100%;
    color: $--color_info;
  // width: 300px;
  }
  }
  .app-more {
    padding: 0px 30px;
    justify-content: center;
    align-items: center;
  .process-title {
    line-height: 40px;
    margin-left: 20px;
    font-size: 18px;
  }
  .list {
    width: 100%;
    text-align: center;
  }
  }
  }
  .swiper-tabs-card {
    padding: 20px;
    background-color: $--home_tabs_bg_color;
  &-title {
     line-height: 30px;
     font-size: 16px;
     color: $theme_summer_color;
   }
  .tags-swiper-content {
    display: inline-block;
    padding: 0px 15px;
    cursor: pointer;
    border-radius: 20px;
  &:hover {
     color: $--color_text_white;
     background-color: $theme_summer_color;
   }
  }
  .tags-swiper-content.is-active {
    color: $--color_text_white;
    background-color: $theme_summer_color;
  }
  .el-divider--horizontal {
    margin: 22px 0;
  }
  &-grid {
  .el-card {
    background-color: $--home_tabs_bg_color;
  }
  }
  &-table {
  .tabs-card-table-header {
  th:first-child {
    border-radius: 5px 0px 0px 5px;
  }
  th:nth-last-child(2) {
    border-radius: 0px 5px 5px 0px;
  }
  }
  .col-bule {
    color: #409eff !important;
  }
  .col-red {
    color: red !important;
  }
  .col-pink {
    color: #f720e5 !important;
  }
  }
  }
  .scp-tabs-card-identify {
  // padding: 20px 0px;
  // .el-tabs__header {
     //   padding: 0px 20px;
     // }
  .el-carousel--horizontal {
  // width: 400px;
  .el-carousel__arrow {
    height: 25px;
    width: 25px;
    background-color: rgba(31,45,61,0);
    color: #409eff;
  }
  .el-carousel__arrow:hover {
    background-color: rgba(31,45,61,0);
    color: #409eff !important;
  }
  .el-carousel__arrow--left{
    left: -5px;
    font-size: 20px
  }
  .el-carousel__arrow--right{
    font-size: 20px;
    right: -5px;
  }
  .el-carousel__item {
    transform: none !important;
    background-color: $--home_tabs_bg_color;
    width: 94%;
    margin-left: 3%;
  }
  }
  }
  .swiper-tabs-card-border {
    border-bottom: 3px solid $theme_summer_color;
  }
  // 应用流程（分页）
     .swiper-tabs-carousel-process {
  .el-carousel__container {
    height: 187px
  }
  }
</style>
<script>
  import { mapState, mapActions } from 'vuex'
  import {ALERT} from '@/utils/responseHandle'
  import {COMMON} from '@/utils/commonUtil'
  import * as Constant from '@/utils/constant'
  import BasicLayout from '@/components/common/BasicLayout'
  import Carousel from '@/components/common/Carousel'
  import NoticeBar from '@/components/common/NoticeBar'
  import TagsSwiper from '@/components/common/TagsSwiper'
  import ListView from '@/components/common/ListView'
  import Gird from '@/components/common/Gird'
  import GridItem from '@/components/common/GridItem'
  import Footer from '@/components/common/Footer'
  import FunctionConfig from '@/components/FunctionConfig'
  import FunctionConfigMixins from '@/mixins/FunctionConfig'
  import ModalBox from '@/components/common/ModalBox'
  import sys_manage from '@/api/sys_manage'
  export default {
    components: { BasicLayout, Carousel, NoticeBar, ListView, Gird, GridItem, Footer, FunctionConfig, TagsSwiper, ModalBox },
    mixins: [FunctionConfigMixins],
    data () {
      return {
        breads: [
          {
            value: Constant.ROUTE_NEED_DEAL_TASK.index,
            label: '我的待办',
            icon: 'scp_home_daiban'
          },
          {
            value: Constant.ROUTE_ALREADY_DONE_TASK.index,
            label: '我的已办',
            icon: 'scp_home_yiban'
          },
          {
            value: Constant.ROUTE_ALREADY_DONE_TASK.index,
            label: '我的待阅',
            icon: 'scp_home_daiyue'
          },
          {
            value: Constant.ROUTE_WORK_DELEGATE.index,
            label: '工作委托',
            icon: 'scp_home_daiyue'
          }
        ],
        homeMainUrl: require('../assets/img/home_main.png'),
        qrcodeApp: [
          require('../assets/img/home_AppQrcode.png')
        ],
        qrcodeList: [
          require('../assets/img/qrcode.png'),
          require('../assets/img/qrcode.png'),
          require('../assets/img/qrcode.png'),
          require('../assets/img/qrcode.png'),
          require('../assets/img/qrcode.png'),
          require('../assets/img/qrcode.png')
        ],
        processTypes: [],
        processGridsData: [],
        systemTypeFinal: {dictKey: 1, dictText: '常用', active: true}, // 固定常用
        systemTypes: [],
        valueFcuntions: [
          {value: 1, label: '项目里程碑', active: true},
          // {value: 2, label: '调试赢得值', active: false}
        ],
        currValueFcuntion: 1,
        tabsGridsFunctions: [
          {
            key: 'scp_system_manage',
            icon: 'scp_home_function',
            des: '调试采购计划'
          },
          {
            key: 'scp_system_manage',
            icon: 'scp_home_function',
            des: '调试采购计划'
          },
          {
            key: 'scp_system_manage',
            icon: 'scp_home_function',
            des: '调试采购计划'
          },
          {
            key: 'scp_system_manage',
            icon: 'scp_home_function',
            des: '调试采购计划'
          },
          {
            key: 'scp_system_manage',
            icon: 'scp_home_function',
            des: '调试采购计划'
          },
          {
            key: 'scp_system_manage',
            icon: 'scp_home_function',
            des: '调试采购计划'
          },
          {
            key: 'scp_system_manage',
            icon: 'scp_home_function',
            des: '调试采购计划'
          }
        ],
        tableDataYY:[],
        // tableDataYY: [
        //   {wbs: 'BS/3', jihuazhi: '2015/12/24', yindezhi: '2018/8/28', yucezhi: '2020/11/11', shijizhi: '2020/9/15', spi: '2020/9/30', reshi: '2021/2/28',zliao:'2021/6/30',schlj:'2021/8/15',bingwang:'2021/8/31',yunshang:'2021/10/31',caozuo:'修改  删除  排序'},
        //   {wbs: 'BS/4', jihuazhi: '2016/12/24', yindezhi: '-', yucezhi: '2021/1/31', shijizhi: '2021/9/15', spi: '2021/9/30', reshi: '2022/1/31',zliao:'2022/5/31',schlj:'2022/7/15',bingwang:'2022/7/31',yunshang:'2022/9/30',caozuo:'修改  删除  排序'}
        // ],
        tableColumnsOther: [
          {
            columncode: 'wbs',
            columnname: '项目-机组'
          },
          {
            columncode: 'jihuazhi',
            columnname: 'FCD'
          },
          {
            columncode: 'yindezhi',
            columnname: 'SDA调试开始'
          },
          {
            columncode: 'yucezhi',
            columnname: '泵站进水'
          },
          {
            columncode: 'shijizhi',
            columnname: '500KV可用'
          },
          {
            columncode: 'spi',
            columnname: '冷试'
          },
          {
            columncode: 'reshi',
            columnname: '热试'
          },
          {
            columncode: 'zliao',
            columnname: '装料'
          },
          {
            columncode: 'schlj',
            columnname: '首次核临界'
          },
          {
            columncode: 'bingwang',
            columnname: '并网'
          },
          {
            columncode: 'yunshang',
            columnname: '运商'
          },
          // {
          //   columncode: 'caozuo',
          //   columnname: '操作'
          // }
        ],
        modalShow: false,
        modalUrl: ''
      }
    },
    created () {
      this.loadProcessTpyes()
      this.loadSystemTpyes()
      this.getNoticeList({_this: this, payload: {pageNum: 1, pageSize: 10}})
      this.getProcessList({_this: this, payload: {pageNum: 1, pageSize: 4}})
      this.sysDictLoadByPaging()
      this.getAllDataTable()
    },
    watch: {
    },
    methods: {
      ...mapActions('home', [
        'getProcessList',
        'getNoticeList',
        'getSysAppLoadByPaging',
        'sysProcessLoadByPaging' // 应用流程（分页）
      ]),
      handleBreads (item) { // 触发首页页签
        if (item.value) {
          COMMON.routerTo(item.value, this.$router)
        }
      },
      getAllDataTable () {
        this.queryTableList({
          ...this.query,
          pageNum: 1,
          pageSize: 1000
        })
      },
      queryTableList (params) {
        //这里的params是对象
        //注意 如果后台json转对象 时间类型好像会抛异常  转到后台 前台用 qs 来转换数据 设置一个全局拦截器 main.js 参考
        let _this = this
        let tables = []
        let totalCount = 0
        sys_manage.sysMilestoneLoadByPaging(params, result => {
          if (result.code === Constant.RT_SUCCESS) {
            //表格数据  数组
            tables = result.data.results
            //分页数据
            totalCount = result.data.totalRows
          } else {
            // _this.$t('cm.tips')
            ALERT.error(result.data.msg)
          }
          //_this.setPagingTotal(totalCount)
          this.tableDataYY = tables
        })
      },
      loadProcessTpyes () { // 获取流程分类
        sys_manage.sysDictLoadByPaging({dictGroupKey: 'ProcessType'}, result => {
          if (result.code === Constant.RT_SUCCESS) {
            if (result.data && result.data.length > 0) {
              this.processTypes = result.data.map((item, index) => {
                item.active = index === 0
                return item
              })
              this.sysProcessLoadByPaging(this.processTypes[0].dictKey)
            }
          }
        })
      },
      // 应用流程（10条）
      // sysProcessLoadByPaging (processType) { // 获取流程分类对应的流程列表
      //   let q = {
      //     processType,
      //     pageNum: 1,
      //     pageSize: 10
      //   }
      //   sys_manage.sysProcessLoadByPaging(q, result => {
      //     if (result.code === Constant.RT_SUCCESS) {
      //       this.processGridsData = result.data.results
      //     }
      //   })
      // },
      loadSystemTpyes () { // 获取系统分类
        let systemTypes = []
        sys_manage.sysDictLoadByPaging({dictGroupKey: 'systemType'}, result => {
          if (result.code === Constant.RT_SUCCESS) {
            if (result.data && result.data.length > 0) {
              systemTypes = result.data.map((item, index) => {
                item.active = false
                return item
              })
              this.systemTypes = [this.systemTypeFinal, ...systemTypes]
            }
          }
        })
      },
      changeProcessTags (item) { // 切换流程分类
        this.processTypes.map(function (item, index) {
          item.active = false
        })
        item.active = true
        this.sysProcessLoadByPaging(item.dictKey)
      },
      changeSystemTags (item) { // 切换系统分类
        this.systemTypes.map(function (item, index) {
          item.active = false
        })
        item.active = true
        if (item.dictKey === this.systemTypeFinal.dictKey) { // 常用
          this.functionLoadUseList({_this: this, payload: {pageNum: 1, pageSize: 11}})
        } else {
          this.getSysAppLoadByPaging(item.dictKey)
        }
      },
      changeValueTags (item) { // 切换数值
        this.valueFcuntions.map(function (item, index) {
          item.active = false
        })
        item.active = true
        this.currValueFcuntion = item.value
      },
      triggerGridItemProcess (v) { // 点击流程
        window.open(v.processUrl, '_blank')
      },
      triggerGridItemSystem (v) { // 点击系统
        if (v.systemInfoId === '100') { // 设置
          this.openFunctionSetting()
        } else {
          window.open(v.systemUrl, '_blank')
        }
      },
      triggerGridItemValue (v) {}, // 点击数值
      handleProcessListItem (v) { // 触发最近流程应用
        console.log(v)
      },
      triggerGridQrcode (url) {
        this.modalShow = true
        this.modalUrl = url
      },
      closeModal () {
        this.modalShow = false
      },
      getColumnWidth (columns) {
        let width = ''
        switch (columns) {
          case 'yindezhi':
            width = '110'
            break
          default:
            width = '110'
            break
        }
        return width
      },
      handleCellClass ({row, column, rowIndex}) {
        let colorClass = ''
        switch (column.property) {
          case 'jihuazhi': case 'yindezhi':
            colorClass = 'col-bule'
            break
          case 'yucezhi': case 'shijizhi':
            if (rowIndex === 0 || rowIndex === 3) colorClass = 'col-red'
            if (rowIndex === 2 ) colorClass = 'col-pink'
            break
          case 'spi':
            if (rowIndex === 0 ) colorClass = 'col-red'
            if (rowIndex === 2 ) colorClass = 'col-pink'
            if (rowIndex === 3 ) colorClass = 'col-bule'
            break
          case 'reshi':
            if (rowIndex === 2 ) colorClass = 'col-bule'
            break
          default:
            colorClass = ''
            break
        }
        return colorClass
      },
      sysDictLoadByPaging () {
        let systemTypesbackup =[]
        sys_manage.sysDictLoadByPaging({dictGroupKey: "QRcode"}, result => {
          //console.log("sysdict-97-",result.data);
          if (result.code === Constant.RT_SUCCESS) {
            if (result.data && result.data.length > 0) {
              systemTypesbackup = result.data.map((item, index) => {
                item.active = false
                // console.log("sysdict-772-",item);
                return item
              })
              this.qrcodeList =[];
              this.qrcodeList = [...systemTypesbackup]
            }
          } else {
            ALERT.error(result.msg)
          }
        })
      }
    },
    mounted () {
      const that = this
    },
    computed: {
      ...mapState({
        noticeList: state => state.home.noticeList,
        processList: state => state.home.processList,
        processGridsPage: state => state.home.processGridsPage // 应用流程（分页）
      })
    }
  }
</script>
